import React, { useState } from 'react';
import { Row, Col, Button, Card, Modal, Form, Input, Descriptions } from 'antd';
import columnsData, { columnsDataType } from './data';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getPageList } from './service';
import styles from './index.css';

export default ({ positionInfo, setIsLoadCastingDetail }) => {
  // 表头
  const columns: ProColumns<columnsDataType>[] = columnsData;
  return (
    <>
      <Card style={{ marginBottom: 16 }}>
        <Button
          type="primary"
          onClick={() => {
            setIsLoadCastingDetail(false);
          }}
          className={styles.btn}
        >
          返回
        </Button>
        <Descriptions title="身份详情">
          <Descriptions.Item label="名称">
            {positionInfo.name}
          </Descriptions.Item>
          <Descriptions.Item label="等级">
            {positionInfo.grade}
          </Descriptions.Item>
          <Descriptions.Item label="数量">
            {positionInfo.totalSupply}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      {/* table */}
      <Card>
        <ProTable
          columns={columns}
          rowKey="metaDataNo"
          pagination={{
            showQuickJumper: true,
          }}
          toolBarRender={false}
          search={false}
          request={async (params) => {
            let res = await getPageList({
              ...params,
              positionGrade: positionInfo.grade,
            });
            console.log(res);

            const result = {
              data: res.data,
            };
            return result;
          }}
        />
      </Card>
    </>
  );
};
